import React, { useState, useEffect } from 'react';
import './index.css';
import Navigation from '../../components/navigation';
import CustomerService from '../../components/CustomerService';
import a from '../../assets/img/a.png';
import a1 from '../../assets/img/a1.png';
import a5 from '../../assets/img/a5.png';
import b from '../../assets/img/b.png';
import b1 from '../../assets/img/b1.png';
import b2 from '../../assets/img/b2.png';
import c from '../../assets/img/c.png';
import c1 from '../../assets/img/c1.png';
import c2 from '../../assets/img/c2.png';

const AdvertisingDesign: React.FC = () => {
  const [showFhdb, setShowFhdb] = useState(false);
  const [selectedScene, setSelectedScene] = useState('海报');
  const [selectedUsage, setSelectedUsage] = useState('全部');
  const [selectedColors, setSelectedColors] = useState<string[]>([]);
  const [sortBy, setSortBy] = useState('综合排序');

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;

      if (scrollTop === 0) {
        setShowFhdb(false);
      } else if (scrollTop + windowHeight >= documentHeight - 100) {
        setShowFhdb(true);
      } else {
        setShowFhdb(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 场景分类
  const sceneCategories = [
    '全部', '海报', '展板', '节日海报', '背景', '元素', '易拉宝', '包装', '样机', 
    '宣传单', '名片卡券', '艺术字', 'LOGO', '3D海报', '其它', '国外海报', '画册', '证书', '海报套图', '软件工具'
  ];

  // 用途分类
  const usageCategories = [
    '全部', '促销营销', '餐饮美食', '中国风', '教育培训', '风格海报', 'IT互联网科技', 
    '党建党政', '公益', '汽车', '开业', '企业文化', '房地产', '旅游出行', '化妆品', 
    '医疗美容', '招聘', '运动', '金融理财', '其它'
  ];

  // 颜色选项
  const colorOptions = [
    { hex: '#8B5CF6', name: '紫色' },
    { hex: '#1E40AF', name: '深蓝' },
    { hex: '#3B82F6', name: '蓝色' },
    { hex: '#0D9488', name: '青色' },
    { hex: '#16A34A', name: '绿色' },
    { hex: '#84CC16', name: '浅绿' },
    { hex: '#EAB308', name: '黄色' },
    { hex: '#F97316', name: '橙色' },
    { hex: '#A16207', name: '棕色' },
    { hex: '#0F766E', name: '深青' },
    { hex: '#1E3A8A', name: '深蓝' },
    { hex: '#EC4899', name: '粉色' }
  ];

  // 排序选项
  const sortOptions = [
    { name: '综合排序', hot: false },
    { name: '热门下载', hot: false },
    { name: '最新上传', hot: true },
    { name: '昨日热图', hot: false }
  ];

  // 模拟广告设计数据
  const adTemplates = [
    { id: 1, title: '蓝色旅行海报模板', downloads: 1250, likes: 89, image: b, isOriginal: true, isEnterprise: false, colors: ['#3B82F6', '#1E40AF'] },
    { id: 2, title: '夏日主题海报设计', downloads: 980, likes: 76, image: b1, isOriginal: true, isEnterprise: true, colors: ['#16A34A', '#84CC16'] },
    { id: 3, title: '产品展示广告设计', downloads: 756, likes: 65, image: b2, isOriginal: false, isEnterprise: false, colors: ['#F97316', '#EAB308'] },
    { id: 4, title: '企业宣传海报模板', downloads: 634, likes: 54, image: c, isOriginal: true, isEnterprise: false, colors: ['#1E40AF', '#3B82F6'] },
    { id: 5, title: '招聘信息海报设计', downloads: 445, likes: 43, image: c1, isOriginal: false, isEnterprise: true, colors: ['#EC4899', '#8B5CF6'] },
    { id: 6, title: '活动推广海报模板', downloads: 332, likes: 32, image: c2, isOriginal: true, isEnterprise: false, colors: ['#0D9488', '#16A34A'] },
    { id: 7, title: '节日促销海报设计', downloads: 298, likes: 28, image: a, isOriginal: true, isEnterprise: false, colors: ['#F97316', '#EC4899'] },
    { id: 8, title: '品牌宣传海报模板', downloads: 267, likes: 25, image: a1, isOriginal: false, isEnterprise: true, colors: ['#8B5CF6', '#1E3A8A'] },
  ];

  // 根据选中的颜色筛选模板
  const filteredTemplates = selectedColors.length > 0 
    ? adTemplates.filter(template => 
        template.colors.some(color => selectedColors.includes(color))
      )
    : adTemplates;

  return (
    <div className="advertising-design-page">
      <Navigation />
      
      {/* 主内容区域 */}
      <div className="main-content">
        {/* 头部横幅 */}
        <div className="header-banner">
          <div className="banner-content">
            <h1 className="banner-title">广告设计</h1>
          </div>
        </div>

        {/* 面包屑导航 */}
        <div className="breadcrumb">
          <div className="container">
            <span className="breadcrumb-text">当前位置：</span>
            <span className="breadcrumb-link">广告设计</span>
          </div>
        </div>

        {/* 搜索和筛选区域 */}
        <div className="search-filter-section">
          <div className="container">
            {/* 搜索栏 */}
            <div className="search-bar">
              <div className="search-tags">
                <span className="search-tag">
                  {selectedScene}
                  <button className="tag-close" onClick={() => setSelectedScene('全部')}>×</button>
                </span>
              </div>
              <div className="search-input-wrapper">
                <input 
                  type="text" 
                  placeholder="输入关键词,在广告设计分类页下检索" 
                  className="search-input" 
                />
                <button className="search-btn">搜索</button>
              </div>
              <div className="search-results">
                共144082个结果
              </div>
            </div>

            {/* 场景筛选 */}
            <div className="filter-section">
              <div className="filter-title">场景：</div>
              <div className="filter-options">
                {sceneCategories.map((scene, index) => (
                  <button
                    key={index}
                    className={`filter-option ${selectedScene === scene ? 'active' : ''}`}
                    onClick={() => setSelectedScene(scene)}
                  >
                    {scene}
                    {scene === '样机' && <span className="new-badge">N</span>}
                  </button>
                ))}
              </div>
            </div>

            {/* 用途筛选 */}
            <div className="filter-section">
              <div className="filter-title">用途：</div>
              <div className="filter-options">
                {usageCategories.map((usage, index) => (
                  <button
                    key={index}
                    className={`filter-option ${selectedUsage === usage ? 'active' : ''}`}
                    onClick={() => setSelectedUsage(usage)}
                  >
                    {usage}
                  </button>
                ))}
              </div>
            </div>

            {/* 颜色搜索 */}
            <div className="color-search-section">
              <div className="color-search-title">颜色搜索：</div>
              <div className="color-palette">
                {colorOptions.map((color, index) => (
                  <button
                    key={index}
                    className={`color-option ${selectedColors.includes(color.hex) ? 'active' : ''}`}
                    style={{ backgroundColor: color.hex }}
                    onClick={() => {
                      if (selectedColors.includes(color.hex)) {
                        setSelectedColors(selectedColors.filter(c => c !== color.hex));
                      } else {
                        setSelectedColors([...selectedColors, color.hex]);
                      }
                    }}
                    title={color.name}
                  />
                ))}
              </div>
              {selectedColors.length > 0 && (
                <div className="selected-colors">
                  {selectedColors.map((colorHex, index) => (
                    <div key={index} className="selected-color-tag">
                      <div className="color-preview" style={{ backgroundColor: colorHex }}></div>
                      <span className="color-hex">{colorHex}</span>
                      <span className="color-percentage">50%</span>
                      <button 
                        className="remove-color" 
                        onClick={() => setSelectedColors(selectedColors.filter(c => c !== colorHex))}
                      >
                        ×
                      </button>
                    </div>
                  ))}
                </div>
              )}
              <div className="color-hint">点击左侧色块,选取不同颜色试试吧~</div>
            </div>

            {/* 排序和类型 */}
            <div className="sort-section">
              <div className="sort-options">
                <span className="sort-label">排序方式：</span>
                {sortOptions.map((option, index) => (
                  <button
                    key={index}
                    className={`sort-option ${sortBy === option.name ? 'active' : ''}`}
                    onClick={() => setSortBy(option.name)}
                  >
                    {option.name}
                    {option.hot && <span className="new-badge">N</span>}
                  </button>
                ))}
              </div>
              <div className="material-type">
                <span className="type-label">素材类型：</span>
                <label className="checkbox-label">
                  <input type="checkbox" /> 包图自产
                </label>
                <label className="checkbox-label">
                  <input type="checkbox" /> 企业专享
                </label>
                <label className="checkbox-label">
                  <input type="checkbox" /> 创意Pro
                </label>
              </div>
            </div>
          </div>
        </div>

        {/* 内容网格 */}
        <div className="content-grid">
          <div className="container">
            <div className="templates-grid">
              {filteredTemplates.map(template => (
                <div key={template.id} className="template-card">
                  <div className="template-image">
                    <img src={template.image} alt={template.title} />
                    <div className="template-overlay">
                      <button className="preview-btn">预览</button>
                      <button className="download-btn">下载</button>
                    </div>
                    <div className="template-badges">
                      <span className="badge-original">包图网</span>
                      <span className="badge-genuine">正版</span>
                    </div>
                  </div>
                  <div className="template-info">
                    <h3 className="template-title">{template.title}</h3>
                    <div className="template-stats">
                      <span className="downloads">下载 {template.downloads}</span>
                      <span className="likes">点赞 {template.likes}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 右侧浮动菜单 */}
      <div className="floating-menu">
        <div className="floating-item">
          <div className="floating-icon">VIP</div>
          <span>企业VIP</span>
        </div>
        <div className="floating-item">
          <div className="floating-icon">VIP</div>
          <span>个人VIP</span>
        </div>
        <div className="floating-item">
          <div className="floating-icon">📋</div>
          <span>招聘</span>
        </div>
        <div className="floating-item">
          <div className="floating-icon">🎁</div>
          <span>福利</span>
        </div>
        <div className="floating-item" onClick={() => window.open('/customer-chat', '_blank')}>
          <div className="floating-icon">💬</div>
          <span>客服</span>
        </div>
      </div>

      {/* 返回顶部按钮 */}
      {showFhdb && (
        <div className='fhdb' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <img src={a5} alt="返回顶部" style={{ marginLeft: '25px', marginTop: '20px' }} />
        </div>
      )}

      <CustomerService />
    </div>
  );
};

export default AdvertisingDesign; 